<template>
    <div class="latge">
        <div class="item">
            <p class="title">大类<el-button type="text" @click="addLarge('add')" class="btn">[ + ]</el-button>
                <span v-if="serverType==1">位置</span>
            </p>
        </div>
        <div class="lists">
            <div :class="name==item.name?'item act':'item'" v-for="(item,index) in largeList" @click="large(item)">
                <p class="list">{{item.name}} <span v-if="serverType==1">{{item.location}}</span></p>
                <div class="btn-item" :style="item.name==name?'display:block':'display:none'">
                    <el-button type="text" @click="addLarge('edit',item.id)" class="btn">编辑</el-button>
                    <el-button type="text" @click="delLarge(item.id)" class="btn">删除</el-button>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import { request } from "../../assets/request.js";
import { getArrEqual } from "../../assets/session.js";
export default {
    data(){
        return{
            largeList:[],
            serverType:1,
            name:''
        }
    },
    created(){
        this.positionList()
        this.$root.$on('serverType',serverType=>{
            this.serverType=serverType
            this.selectList({type:this.serverType})
        })
        this.$root.$on('saveLarge',type=>{
            this.serverType=type
            this.selectList({type:this.serverType})
        })
    },
    methods:{
        addLarge(type,id){
            let that=this
            this.$root.$emit('addLarge',type,that.serverType,id)
        },
        delLarge(id){
            let that=this
            request.delAlert({
                name:'删除该大类',
                that,
                fn(obj){
                    let url='bigType/'+id+'?greenToken='+request.greenToken
                    request.ajaxDel({
                        url,
                        that,
                        fn(res){
                            that.$message(obj)
                            that.selectList({type:that.serverType})
                        }
                    })
                }
            })
        },
        selectList(obj) {
            let url = "bigType";
            let that=this   //解决this指向问题
            request.ajaxGet({
                url,
                that,
                params:obj,
                fn(res){
                    let position=that.$store.state.positionList
                    if(res[0]){
                        for(let i in res){
                            res[i].location=res[i].location.split('-')
                            let location=''
                            res[i].location=getArrEqual(res[i].location,position)
                            // console.log(res[i].location)
                            for(let j in res[i].location){
                                location+=res[i].location[j].name+','
                            }
                            if(location){
                                location = location.substr(0,location.length-1);
                            }
                            res[i].location=location
                        }
                        that.name=res[0].name
                        that.large(res[0])
                    }else{
                        that.large()
                    }
                    that.largeList=res
                }
            })
        },
        large(parent){ //点击大类
            if(parent){
                this.name=parent.name
            }
            this.$root.$emit('large',parent)
        },
        positionList(){
            let url = "houses/location";
            let that=this   //解决this指向问题
            request.ajaxGet({
                url,
                that,
                fn(res){
                    that.$store.state.positionList=res.list
                    that.selectList({type:that.serverType})
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.latge{
    width: 300px;
    background: #ffffff;
    height: 100%;
    margin-right: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .lists{
        overflow-x: hidden;
        height: 90%;
        overflow-y: scroll;
        line-height: 30px;
        text-align: center;
        padding-bottom: 45px;
    }
    .item{
        width:100%;
        border-bottom: 1px solid #eeeeee;
        text-align: left;
        padding: 0 15px;
        box-sizing: border-box;
        line-height: 40px;
        font-size: 14px;
        
        .list{
            color: #000000;
            span{
                color: #999999;
                float: right;
                font-size: 12px;
            }
        }
        .btn-item{
            display: none;
            margin-left: -15px;
        }
    }
    .act{
        background: #eeeeee;
    }
    .act:hover .btn-item{
        display: block;
    }
    .btn{
        margin-left: 15px;
    }
    .title{
        color: #999999;
        font-size: 16px;
        span{
            float:right;
            line-height: 40px;
            font-size: 12px;
        }
    }
}
</style>
